<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>小米商城-为发烧而生_列表页</title>
    <link
      rel="shortcut icon"
      href="//s01.mifile.cn/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="/libs/swiper/css/swiper.css" />
    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="/css/list.css" />
  </head>
  <body>
    <div class="xiaomi">
      <header></header>
      <!-- banner开始 -->
      <div class="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper" id="Listbanner"></div>
          <script type="text/html" id="getListbanner">
            {{each list item}}
            <div class="swiper-slide">
              <img src="{{item.img}}" alt="" />
            </div>
            {{/each}}
          </script>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>

      <!-- banner结束 -->
      <!-- 内容 -->
      <section>
        <!-- 明星产品 -->
        <div class="mingxing">
          <div class="contents">
            <h2>明星产品</h2>
            <div class="redmiK20" id="ListContents"></div>
            <script type="text/html" id="getListContents">
              <img src="{{list.img}}" alt="" />
              <div class="jieshao">
                <a href="/html/details.html?id={{list.id}}">{{list.title}}</a>
                <h3>{{list.introduction}}</h3>
                <h4>{{list.price}}<i>元</i><s>{{list.originalPrice}}元</s></h4>
              </div>
            </script>

            <div class="Phonese">
              <ul id="ListContent"></ul>
              <script type="text/html" id="getListContent">
                {{each list item}}
                <li>
                  <a href="/html/details.html?id={{item.id}}">
                    <img src="{{item.img}}" alt="" />
                    <h3>{{item.title}}</h3>
                    <p>
                      {{item.introduction}}<i>{{item.price}}</i><b>元</b><s>{{item.originalPrice}}元</s>
                    </p>
                  </a>
                </li>
                {{/each}}
              </script>
            </div>
          </div>
        </div>

        <!-- 明星产品结束 -->
      </section>
      <!-- 内容结束 -->

      <footer></footer>
    </div>
    <script src="/libs/require/require.min.js" data-main="/js/list"></script>
  </body>
</html>
